body, html {
  width: 100%;
  font-size: 15px;
}

@mixin clearfix {
  display: block;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}


a {
  color: #000;
  text-decoration: none;
}

$color_gray: #939392;
$color_light_gray: #e8e8e6;
$color_header_bg:#3f4447;
$top_bar_height: 3.33rem;
$color_light_blue: #0093dd;
$padding_section: .5rem;
$btn_wrap_mt: 1.67rem;

.startup-sliders {
  img {
    width: 100%;
  }
}

.page-body {
  padding-top: 3.7rem;
}

.site-header {
  
  background: $color_header_bg;
  position: fixed;
  height: 3.7rem;
  width: 100%;
  z-index: 1111;
  img {
    width: 7.4rem;
    height: 2.2rem;
    position:absolute;
    left: 1.6rem;
    top: 61%;
    margin-top: -1.51rem;
  }

  .header-qlink {
    position: absolute;
    right: 1rem;
    top: 50%;
    margin-top: -1rem;

    li {
      float: left;

      &:last-child {
        margin-left: 0.5rem;
      }
    }

    a {
      color: #fff;
      font-size: 1rem;
      text-decoration: none;
      display: inline-block;
      width: auto;
      height: 1.6rem;
      text-align: center;
      border-radius: 1.6rem;
      line-height: 1.8rem;
      border: 2px solid #fff;
      margin-top: 0px;
      margin-left: 0px;
      padding: 0.1rem .9rem;
    }
  }
}


.adBanner-inner{
  img{
    width: 100%;
    display: block;
  }
}

.home {
  .site-header {
    a {
      margin-left: auto;
      margin-top: auto;
      float: none;
    }
  }
  .adBanner-inner{
    padding-top: .36rem;
    background:#e8e8e6;
  }

  .bulletin-nav{
    
    @include clearfix;
    border-bottom: 1px solid #e0e0e0;
    .left{
      float: left;
      width: 50%;
      height: 6rem;
      padding: .8rem 0;
      box-sizing:border-box;
      border-right: 1px solid #e0e0e0;
      text-align: center;
      .text,i,.inner{
         display: inline-block;
      }
      i{
        width: 4rem;
        height: 4rem;
      }
      .inner{
        p{
          margin-bottom: .2rem;
        }
        span{

          font-size: .8rem;
        }
      }
      .text{
        float: right;
        margin-left: .4rem;
        margin-top: 1rem;
        padding-left: .56rem;
        text-align: left;
        border-left: 1px solid #ccc;
        span{
          color: #bababa;
        }
      }
    }
    .right{
     
      float: right;
      width: 50%;
      height: 6rem;
      box-sizing:border-box;
      i{
        position: absolute;
        top: .2rem;
        left: .4rem;
        width: 2rem;
        height: 2rem;
      }
      a{
        display: block;
        height: 50%;
        padding: .3rem 0;
        box-sizing: border-box;
        text-align: center;
        &:first-child{
          border-bottom: 1px solid #e0e0e0;
        }
        .icon-inner{
          position: relative;
          display: inline-block;

          span{
            float: right;
            margin-left: 3rem;
            margin-top: .5rem;
            padding-left: .6rem;
            border-left: 1px solid #ccc;
            line-height: 1.5rem;
          }
        }
      }
    }


    i{
      img{
        width: 100%;
      }
    }
  }
}

.slider-con {
  img {
    width: 100%;
  }
}

.marquee {
  position:relative;
  padding: 0px .8rem;
  .marquee-icon i{
    float: left;
    width: 4.1rem;
    height: 1rem;
    margin-top: .5rem;
    background: url(../misc/images/marquee-ad-icon.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }

    .ui-marquee{
      padding: .5rem 0 .4rem .7rem;
      margin: .4rem 1.2rem .4rem 5.5rem;
      span {
        padding-left: .4rem;
        color: $color_gray;
        font-size: .9rem;
      }
      &:after{
        content: "";
        position: absolute;
        top: .3rem;
        left: 5.7rem;
        height: 1.4rem;
        width: 1px;
        background: #ccc;
      }
    }
 
  
  .arrow-icon{
    position: absolute;
    top: .4rem;
    right: 1rem;
    display: inline-block;
    width: .6rem;
    height: .9rem;
    img{
      width: 100%;
    }
  }
}

.quick-section {
  
  padding-top: .6rem;
  background: $color_light_gray;

  .inner {
    background: #fff;
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center;
    
    & > div {
      width: 25%;
      padding: 0.6rem 0;
      box-sizing: border-box;
      border-right: 1px solid #e3e3e3;
      border-bottom: 1px solid #e3e3e3;

      &:nth-child(4), &:nth-child(8) {
        border-right: none;
      }
    }

    a {
      text-decoration: none;
      color: #000;
      font-size: .9rem;
    }
    img{
      width: 100%;
    }
  }
}

.site-nav {
  padding-top: $padding_section;
  background: $color_light_gray;
  
  .inner {
    background: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .nav-item {
    width: 50%;
    padding: 1rem .9rem;
    box-sizing: border-box;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    a {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      .box{
        position: relative;
      }
      .icon-inner{
        display: inline-block;
        vertical-align: middle;
        i{
          position: absolute;
          top: 0;
          left: 1.6rem;
          display: inline-block;
          width: 3rem;
          height: 3rem;
          img{
            width: 100%;
          }
        }
        span {
          display: inline-block;
          float: right;
          height: 3rem;
          line-height: 3rem;
          margin-left: 4rem;
          font-size: 1rem;
        }
      }
     
    }
  }
}
.footer {
  margin-bottom: 3.8rem;
  .inner {
    background: #f9f9f9;
    padding-top: $padding_section;
    border: 1px solid #ebebeb;
  }
  .footer-links {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    background: #3f4447;
    .footer-item {
      width: 33.33%;
      height: 2.66rem;
      line-height: 2.7rem;
      text-align: center;
      a{
        display: inline-block;
        width: 100%;
        color: #fff;
      }
    }
  }
}

.footer-menu{
  position:fixed;
  bottom: 0;
  width: 100%;
  .footer-menu-items {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 1px solid #ebebeb;
    background : #fff;
    .menu-item {
      width: 33.33%;
      height: 3.8rem;
      box-sizing: border-box;
      padding-top: .4rem;
      text-align: center;
      border-right: 1px solid #ebebeb;
      a{
        display: block;
        font-size: .8rem;
        
        &.active {

          .icon-home,.icon-game,.icon-me{
            background-position: 0 -2rem;
          }
        }
      }
      .icon{
        display: inline-block;
        width: 1.8rem;
        height: 1.8rem;
        margin-bottom: .2rem;
      }
      .icon-home{
        background: url(../misc/images/footer-icon-1.png);
        background-size: 2rem;
      }
      .icon-game{
        background: url(../misc/images/footer-icon-2.png);
        background-size: 2rem;
      }
      .icon-me{
        background: url(../misc/images/footer-icon-3.png);
        background-size: 2rem;
      }
      .active{
        background-position: 0 -2rem;
      }
    }
  } 
}

.top-bar-header {

  @include clearfix;

  h3 {
    color: #fff;
    display: block;
    text-align: center;
    line-height: 100%;
    position: absolute;
    height: 1rem;
    top: 50%;
    margin-top: -.5rem;
    width: 100%;
  }

  > a {

    width: 1.44rem;
    height: 1.39rem;
    display: inline-block;
    position: absolute;
    top: 51%;
    margin-top: -.7rem;
    left: 1rem;
    background: url(../misc/images/header-arrow.png);
    background-size: 100%;
    z-index: 1111;
  }
}

.btn-wrap {
  margin-top: 1.2rem;
}

.form {
  
  background: $color_light_gray;
  padding-top: $padding_section;

  .inner {
    background: #fff;
  }

  .btn-wrap {
    padding: 0px 1.23rem;
  }

  .form-group {
    padding: .26rem 1.33rem;

    .error {
      color: #ca2727;

      &::-webkit-input-placeholder {
        color: #ca2727;
      }
      &:-ms-input-placeholder {
        color: #ca2727;
      }
      &::-moz-placeholder  {
        color: #ca2727;
      }
      &:-moz-placeholder {
        color: #ca2727;
      }
    }

    input {
      border: none;
      padding-left:2.4rem;
      height: 2.26rem;
      line-height: 2.26rem;
      padding-top: 0.26rem;
      padding-bottom: 0.26rem;
      box-sizing: border-box;
      width: 100%;
      font-size: 1rem;

      &:focus {
        outline: none !important;

      }
    }
  }

 
}
.login-page{
  .form{
    .form-group {
      input{
        display: block;
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        border-bottom: 2px solid #bdbdbd;
        background: url(../misc/images/login-icon01.png) no-repeat;
        background-size: 1.7rem;
        background-position: .3rem .5rem;
      }
      &:nth-child(2){
        input{
          background: url(../misc/images/login-icon02.png) no-repeat;
          background-size: 1.7rem;
          background-position: .3rem .5rem;
        }
      }
      &:nth-child(3){
        input{
          background: url(../misc/images/login-icon03.png) no-repeat;
          background-size: 1.7rem;
          background-position: .3rem .5rem;
        }
      }
      label {
        display: none;
      }
    }
  }
}
button {
  display: block;
  width: 100%;
  padding: .9rem 1.33rem;
  text-align: center;
  border: none;
  outline: none;
  border-radius: .5rem;
  font-size: 1.2rem;
}

.btn-light-blue {
  background: $color_light_blue;
  color: #fff;
}

.login-form {

  .form-links {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 1.33rem;

    a {
      width: 50%;
      text-align: center;
      display: block;
      color: $color_light_blue;
    }
  }
}

.login-form {
  position: relative;
  .image-code {
    position: absolute;
    bottom: 7.8rem;
    right: 1.3rem;
  }
}

.alegan-wrap {
  height: 2.76rem;
  line-height: 2.76rem;
  margin-bottom: 4rem;
  text-align: center;
  
  input{
    vertical-align:middle;
    margin-top:3px;
  }
  a{
    color: #009ae5;
  }
}

.register-form {
  .inner{
    padding: .8rem 8%;
  }
  .form-group {
    position: relative;
    width: 100%;
    padding: .26rem 0 .26rem 5.5rem;
    border-bottom: 2px solid #bdbdbd;
    box-sizing: border-box;
    label{
      display: block;
      position: absolute;
      top: .87rem;
      left: 0;
      width:4rem;
      height: 2rem;
      padding-left: .7rem;
      -webkit-text-align: justify;
      text-align: justify;
      -webkit-text-align-last: justify;
      text-align-last: justify;
    }
    
    

    input{
      display: inline-block;
      padding-left: 0;
    }
    
  }
  .form-group-userName,.form-group-password1,.form-group-password2,.form-group-realName,.form-group-userMobile,.form-group-withdrawPwd{
    label{
      &:after{
        content: "*";
        position: absolute;
        top: .2rem;
        left: 0;
        color: #ff0012;
      }
    }
  }
  .tips{
    position: relative;
    font-size: .8rem;   
    padding: 1rem 2rem 0 4.5rem;
    margin-top: 1rem;

    i{
      position: absolute;
      top: 1rem;
      left: 2rem;
      display: inline-block;
      width: 2rem;
      height: 2rem;
      background: url(../misc/images/userCenter/userCenter-icon.png);
      background-size: 9rem;
      background-position:0 -20.4rem;
    }
    p{
      line-height: 1.2rem;
      font-size: .9rem;
	  color: #a7a7a7;    }
  }
}

input[type="checkbox"] {
  border-radius: 0px;
  border: 1px solid #a4a4a2;
}


.page {
  display: block;
}


.light-blue {
  @extend .site-header;
  background: {
    color: #76c5f0;
  }

  &.top-bar-header {
    h3 {
      
    }
  }
}

.contact-items {
  
  padding: 0px 2.5rem;

  a {
    display: block;
    width: 100%;
    border-radius: 1rem;
    height: 3.13rem;
    line-height: 3.13rem;
    text-align: center;
    border: 1px solid #6bbdec;
    box-sizing: border-box;
    margin-top: 1.1rem;
  }
}

.page-linechk {

  .linecheck-img{
    width: 80%;
    margin: 2rem auto;
    img{
      width: 100%;
    }
  }
 
  table{
    width: 80%;
    margin: 0 auto;
    td{
      line-height: 1.8rem;
      text-align: center;
      border:1px solid #ccc;
      font-size: .9rem;
    }
  }
}
.page-promotion{
  .promotion-items {
    padding-top: .5rem;
    padding-bottom: 4.8rem;
    background: #f5f5f5;
    li{
      position: relative;
      min-height: 2.5rem;
      padding: .5rem 1rem;
      margin-top: .8rem;
      background: #fff;
      span{
        display: inline-block;
        width: 2.6rem;
        height: 2.6rem;
        line-height: 2.6rem;
        border-radius: .4rem;
        color: #fff;
        font-size: 1.4rem;
        font-weight: 700;
        background: #76c5f0;
        text-align: center;
        position: absolute;
        left: 0px;
        margin-left: 1rem;
        top: 50%;
        margin-top: -1.3rem;
      }
      .content{
        padding-top: .2rem;
        margin-left: .8rem;
        font-family: "\9ED1\4F53";
        padding-left: 2.5rem;
        h3{
          font-size: 1.2rem;
          font-weight:700;
          color: #494444;
        }
        p{
          margin-top: .4rem;
          font-size: .7rem;
          color: #ADABAC;
        }
      }
    }
    
  }
}


.page-responsive {
  padding-bottom: 3.8rem;
  .inner {
    padding: 2rem 2.2rem;
  }

  h3 {
    font-size: 1rem;
    font-weight: 700;
  }

}

.live-items {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 1rem;
  background:#fff;  
  .live-item {
    position:relative;
    width: 33.33%;
    box-sizing:border-box;
    text-align: center;
    border-top: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
    &:after{
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      height: 1px;
      width: 100%;
      background: #d1d1d1;
    }
    &.no-top-border{
      border-top: none;
    }

    &.no-border {
      border-right: none;
    }

    .inner {
      width: 4.8rem;
      margin: 0 auto;
      padding: 1.16rem 0px;

      h4 {
        margin-top: .6rem;
      }

      img {
        width: 100%;
      }
    }
  }
}

.elect-items {
  @extend .live-items;

  .elect-item {
    @extend .live-item;
  }
}

.sport-items {
  @extend .live-items;
  

  .sport-item {
    @extend .live-item;
    /* display: block;
    padding: 0.5rem 0px;
    width: 100%;
    border-radius: 15px;
    margin-top: 1.4rem;
    border: 1px solid #d1d1d1; */
  }
}

.bm-burger-bars {
  background: #fff;
}

.hg-buger-menu.is-open .bm-menu-wrap {
  z-index: 1112 !important;
}

.bm-burger-button {
  position: fixed;
  left: auto;
  top: 1.3rem;
  right: 1.6rem;
  width: 1rem;
  height: 1rem;
  z-index: 1111 !important;
}

.page-elect-game {
  .page-body {
    position: relative;
  }
}

.buger-header {
  @extend .site-header;

  .header-qlink {
    margin-right: 2rem;
  }
}

//在线客服  online-server
.online-service-page{

  .online-server-img{
    width: 50%;
    margin: 2rem auto 1rem;
    img{
      width: 100%;
    }
  }

  .connect-type{
    margin-top: 1rem;
    padding: 0 9%;
    li{
      position: relative;
      padding-left:2.4rem;
      line-height: 3rem;
      border-bottom: 1px solid #cfcfcf;
      font-size: .9rem;
      i{
        position: absolute;
        top:.6rem;
        left: 0;
        display: inline-block;
        width: 1.8rem;
        height: 1.8rem;
        background: url(../misc/images/online-server-icon1.png);
        background-size: 100%;
      }
      &:nth-child(2){
        i{
          background: url(../misc/images/online-server-icon2.png);
          background-size: 100%;
        }
      }
      &:nth-child(3){
        i{
          background: url(../misc/images/online-server-icon3.png);
          background-size: 100%;
        }
      }
      &:nth-child(4){
        i{
          background: url(../misc/images/online-server-icon4.png);
          background-size: 100%;
        }
      }
      span{
        color: #8B8988;
        a{
          color: #8B8988;
        }
      }
    }
    .link-btn{
      display: inline-block;
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      margin-top: 2rem;
      text-align: center;
      background: #76c5f0;
      color: #fff;
      border-radius: .5rem;
    }
    .private-style{
      display: flex;
      display: -webkit-flex;
      -webkit-justify-content:space-between;
      justify-content:space-between;
    }
  }

}

//公司入款优惠  companyPromotion
.companyPromotion{

  .companyPromotion-text{
    padding: 1rem 2.2rem;
    .part{
      h3{
        line-height: 3rem;
        color: #000;
        font-size: 1.2rem;
      }
      p{
        line-height: 1.5rem;
        color: #595959;
        font-family: "黑体";
      }
    }
  }
}


.detail-page {
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  height: 100vh;
  background-color: #03a9f4;
  transition: transform 0.5s, opacity 0.5s;

  &.transition-appear {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  &.transition-appear.transition-appear-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  &.transition-leave {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  &.transition-leave.transition-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

.switch-icon {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;

  .bm-burger-bars {
    height: 20%;
    width: 100%;
    display: block;
    position: absolute;

    &:nth-child(2) {
      top: 50%;
    }
    
    &:nth-child(3) {
      top: 100%;
    }
  }
}

.lottery-page .top-bar-header {

  .switcher {
    width: 1.2rem;
    height: 1rem;
    position: absolute;
    display: block;
    right: 1rem;
    top: 50%;
    margin-top: -.5rem;

    .switch-icon {

    }

  }
}

.promo-content {
  padding: 2rem 3rem 5rem 3rem;

}

.site-header.elect-header {
  background: #3f4447;

  .filter-bar {

    .filters {
      background: #3f4447;
    }
    
    .filter-item  {
      border-top: 1px solid #3f4447;
    }
  }
}




//game start 

.game-list-wrap{
  padding: 4rem 0;
  background: #f5f5f5;
  .hide{
    display: none;
  }
  .game-style-common{
    height: 3.3rem;
    padding: 0 6%;
    border-bottom: 1px solid #ededed;
    background: -webkit-gradient(linear,center top,center bottom,from(#fefeff), to(#dfdfdf));
    .game-style-wrap{
      position: relative;
      padding-left: 3.3rem;
      span{
        display: inline-block;
        padding: .45rem 1rem;
        margin-top: .78rem;
        border-left: 1px solid #b5b3b4;
      }
    }
  }
  .game-name{
    background: #fff;
    .game-style-wrap{
      &:after{
        content: "";
        position: absolute;
        right: 0;
        top: 1.5rem;
        border-top: 5px solid #4d4c4a;
        border-left: 5px solid transparent; 
        border-right: 5px solid transparent; 
        border-bottom: none; 
        transform: rotate(-90deg);
      }
    }
    .iconDown{
      &:after{
        transform: rotate(0deg);
      }
    }
  }
  .game-list {
    padding: 1rem;
    background: #ebebeb;
    .game-style-common{
      background: #fff;
      border-bottom: 1px solid #e0e0e0;
      color: #383735;
    }
    a{
      &:last-child{
        .game-style-common{
          border-bottom: 0;
        }
      }
    }
  }
  .icon{
    position: absolute;
    top: .6rem;
    left: 0;
    display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .icon-card{
    background:url(../misc/images/game/card-icon.png);
  }
  .icon-sport{
    background:url(../misc/images/game/sport-icon.png);
  }
  .icon-live{
    background:url(../misc/images/game/live-icon.png);
  }
  .icon-slot{
    background:url(../misc/images/game/slot-icon.png);
  }
  .icon-cp{
    background:url(../misc/images/game/cp-icon.png);
  }
  .icon-card,.icon-sport,.icon-live,.icon-slot,.icon-cp{
    background-size: 100%;
  }
}

.maintain {
  position: absolute;
  height: 100%;
  text-align: center;
  width: 100%;
  padding-top: 4rem;
  font-size: 1.2rem;
  background: #f1eeee;
  font-weight: bold;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  line-height: 200%;
}


.modify-phone-page{
  .top-bar-header,.link-btn{
    background: #2F96D1 !important;
  }
  .online-server-img{
    width: 100%;
    margin-top: 1rem;
    text-align: center;
    color: #aaa;
    img{
      width: 20%;
      margin-bottom: .6rem;
    }
  }
  .connect-type{
    padding-top: 1rem;
    padding-bottom: 2rem;
    background: #fff;
  }
  
}





.protocol-page{
  .top-bar-header{
    background: #3f4447 !important;
  }
  .page-body{
    padding-top: 3.7rem;
    .content{
      padding: 2rem;
    }
  }
}

.period-choice{
  padding: 1rem 0;
  background: #fff;
  .inner{
    padding: 0 5%;
  }
  ul{
    width: 100%;
    margin-right: -2%;
    overflow: hidden;
    li{
      float: left;
      width:22.7%;
      height: 2rem;
      line-height: 2rem;
      margin-right: 2%;
      background: #fff;
      color: #111;
      border-radius: .2rem;
      text-align: center;
      border: 1px solid #aaa;
      &:last-child{
        margin-right: 0;
      }
    }
    .active{
      background: #0093DD;
      color: #fff;
      border: 1px solid #0093DD;
    }
  }
}
